<template>
  <view class="t-login">
    <!-- 页面装饰图片 -->
    <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>        
    <image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>      
    <!-- 标题 -->
    <view class="t-b">{{ title }}</view>
    <view class="t-b2">修改密码</view>
    <form class="cl">
      <!-- 邮箱输入 -->
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>        
        <view class="line"></view>
        <input type="text" name="email" placeholder="请输入邮箱" v-model="email" />
      </view>
      <!-- 验证码输入 -->
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>        
        <view class="line"></view>
        <input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="code" />
        <view v-if="showText" class="t-c" @tap="getCode">发送邮件</view>
        <view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
      </view>
      <!-- 密码输入 -->
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>        
        <view class="line"></view>
        <input type="password" name="password" placeholder="设置新密码" v-model="password" />
      </view>
      <!-- 确认密码输入 -->
      <view class="t-a">
        <image src="https://zhoukaiwen.com/img/loginImg/yz.png"></image>        
        <view class="line"></view>
        <input type="password" name="confirmPassword" placeholder="确认新密码" v-model="confirmPassword" />
      </view>
      <!-- 修改密码按钮 -->
      <button @tap="updatePassword">修改密码</button>
	  <view class="back-to-login">
	    <view @tap="goBackToLogin">返回登录</view>
	  </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '修改密码',
      email: '',
      code: '',
      password: '',
      confirmPassword: '',
      second: 60,
      showText: true
    };
  },
  methods: {
    validateEmail() {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(this.email).toLowerCase());
    },
    getCode() {
      if (!this.email || !this.validateEmail()) {
        uni.showToast({
          title: '请输入有效的邮箱地址',
          icon: 'none'
        });
        return;
      }
      const that = this;
      uni.request({
        url: 'http://localhost:8887/user/sendCode',
        method: 'GET',
        data: {
          email: this.email
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: '验证码已发送至您的邮箱',
              icon: 'success'
            });
            that.startCountdown();
          } else {
            uni.showToast({
              title: '发送失败，请稍后再试',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
    startCountdown() {
      let timer = setInterval(() => {
        this.second--;
        if (this.second <= 0) {
          clearInterval(timer);
          this.second = 60;
          this.showText = true;
        }
      }, 1000);
      this.showText = false;
    },
    updatePassword() {
      if (!this.email || !this.validateEmail()) {
        uni.showToast({ title: '请输入有效的邮箱地址', icon: 'none' });
        return;
      }
      if (!this.code) {
        uni.showToast({ title: '请输入验证码', icon: 'none' });
        return;
      }
      if (!this.password || this.password.length < 5) {
        uni.showToast({ title: '密码长度必须大于6位', icon: 'none' });
        return;
      }
      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '密码与确认密码不一致', icon: 'none' });
        return;
      }
      uni.request({
        url: 'http://localhost:8887/user/updatePassword',
        method: 'POST',
        data: {
          email: this.email,
          code: this.code,
          password: this.password
        },
        header: {
          'content-type': 'application/json'
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({
                      title: '密码修改成功',
                      icon: 'success'
                    });
                    // 1秒后跳转登录页面
                    setTimeout(() => {
                      this.goBackToLogin();
                    }, 1000);
          } else {
            uni.showToast({
              title: res.data.message,
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
	goBackToLogin() {
	  uni.navigateTo({
	    url: '/pages/login/login'
	  });
	}
  }
};
</script>

<style>
/* 样式与注册页面保持一致 */
.img-a {
  position: absolute;
  width: 100%;
  top: -150rpx; 
  right: 0;
}

.img-b {
  position: absolute;
  width: 50%;
  bottom: 0;
  left: -50rpx;
}

.t-login {
  width: 650rpx;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
  position: relative;
  z-index: 2; 
  padding-top: 100rpx; 
}

.t-login button {
  font-size: 28rpx;
  background: #5677fc;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 30rpx; 
  background: #f8f7fc;
  border: 1px solid #e9e9e9;
  font-size: 28rpx;
  border-radius: 50rpx;
}
.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  margin-right: 20rpx;
}

.t-login .t-a .line{
  width: 2rpx;
  height: 40rpx;
  background-color: #dedede;
  position: absolute;
  top: 28rpx;
  left: 98rpx;
}

.t-login .t-b {
  text-align: left;
  font-size: 46rpx;
  color: #000;
  padding: 50rpx 0 30rpx 0; 
  font-weight: bold;
}

.t-login .t-b2 {
  text-align: left;
  font-size: 32rpx;
  color: #aaaaaa;
  padding: 0rpx 0 50rpx 0; 
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #5677fc;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
  z-index: 3;/* 确保按钮在最上层 */
}

.cl {
zoom: 1;
}

.cl:after {
clear: both;
display: block;
visibility: hidden;
height: 0;
content: '\20';
}
.back-to-login {
  text-align: right;
  padding: 20rpx;
  font-size: 24rpx;
  color: #5677fc;
  cursor: pointer;
  position: absolute;
  /* bottom: 20rpx; */
  right: 20rpx;
}

</style>